<template>
	<div>
		<van-row>
			<van-col span="10">
				<div style="text-align: left;font-size: 20px;margin-top: 10px;">
					<van-nav-bar
					  left-text="&nbsp;订阅到苗提醒"
					  left-arrow
					  @click-left="onClickLeft"
					/>
				</div>
			</van-col>
			<van-col span="14">
				<div style="margin-top: 15px;padding-right: 20px;text-align: right;">
					<van-icon name="ellipsis" size="25" @click="a()"/>&nbsp;
					<van-icon name="close" size="25" @click="b()"/>
				</div>
			</van-col>
		</van-row>
		<div style="font-size:10px;">
			<van-notice-bar color="#07DB00" background="#ecf9ff"
			wrapable
			:scrollable="false"
			
			text="订阅到苗提醒后，当相应疫苗放号时，会收到系统通知。由于短信发送存在延时，9价、4价HPV等稀缺苗请同时订阅抢苗助手。"
			/>
			
		</div>
		<div style="margin-top: 5px;">
			<van-field
			  v-model="result"
			  is-link
			  readonly
			  label="疫苗类型"
			  placeholder="请选择疫苗类型"
			  @click="showPicker = true,selectym()"
			/>
			<van-popup v-model:show="showPicker" round position="bottom">
			  <van-picker
			    
			    :columns="columns"
			    @cancel="showPicker = false"
			    @confirm="onConfirm"
			  />
			</van-popup>
			<van-field
			  v-model="result1"
			  is-link
			  readonly
			  label="意向接种地区"
			  placeholder="请选择接种地区"
			  @click="showPicker1 = true"
			/>
			<van-popup v-model:show="showPicker1" round position="bottom">
			  <van-picker
			    :columns="columns1"
			    :columns-field-names="customFieldName"
			    @cancel="showPicker1 = false"
			    @confirm="onConfirm1"
			  />
			</van-popup>
			<van-field
			  v-model="result2"
			  is-link
			  readonly
			  label="意向接种机构"
			  placeholder="请选择接种机构"
			  @click="showPicker2 = true,showPopup()"
			/>
			<van-popup v-model:show="showPicker2" round position="bottom">
			  <van-picker
			    :columns="columns2"
			    @cancel="showPicker2 = false"
			    @confirm="onConfirm2"
			  />
			</van-popup>
			<van-field
			  v-model="phone"
			  placeholder="请输入联系电话"
			  label="联系电话"
			/>
		</div>
		<div style="margin-top: 30px;margin-left: 30px;">
			<van-checkbox v-model="checked" icon-size="15px" style="font-size: 5px;margin-left: 27px;" @click="check()">勾选代表您已阅读并同意《隐私声明》</van-checkbox>
		</div>
		<div style="margin-top: 25px;">
			<van-button round type="primary" :disabled="isneed" @click="insert()">订阅到苗提醒</van-button>
		</div>
	</div>
</template>

<script>
	import { ref } from 'vue';
	import Citys from "../../../public/city2.json"
	export default {
		created(){
			this.columns1 = Citys
		},
		setup() {
			const onClickLeft = () => history.back();
			return {
				onClickLeft,
			}
		},
		data(){
			return{
				columns1 : [],
				customFieldName : {
					text: 'cityName',
					children: 'cities',
				},
				result1:"",
				showPicker1:false,
				checked:false,
				phone:"",
				isneed:true,
				columns : [],
				result:"",
				showPicker:false,
				columns2 : [], 
				result2 : "",
				showPicker2 :false,
				show:false,
				
			}
		},
		methods:{
			showPopup(){
				this.axios.get("organization/area?area="+this.result1).then((res) => {
					if(res.data.code == 200){
						this.columns2= res.data.data;
					}else{
						 this.$toast({
							message: "亲，网络异常！",
							icon: 'close'
						});
					}
				})
			},
			a(){
				this.$toast.success('分享');
						  
			},
			b(){
				this.$router.push("/")
			},
			check(){
				if(!this.checked){
					this.isneed = true;
				}else{
					this.isneed = false;
				}
			},
			selectym(){
				var that = this;
				this.axios.get("vaccine/all").then((res) => {
					if(res.data.code == 200){
						this.columns = res.data.data;
					}else{
						 this.$toast({
							message: "亲，网络异常！",
							icon: 'close'
						});
					}
				})
			},
			onConfirm(value){
			  this.result = value;
			  this.showPicker = false;
			},
			onConfirm1(value1){
			  this.result1 = value1[0].cityName+"/"+value1[1].cityName+"/"+value1[2];
			  this.showPicker1 = false;
			},
			onConfirm2(value2){
			  this.result2 = value2;
			  this.showPicker2 = false;
			},
			insert(){
				var data = {
					name:this.result,
					area:this.result1,
					organization:this.result2,
					phone:this.phone
				};
				this.axios.post("take/save",data).then((res) => {
					if(res.data.code == 200){
						this.$toast({
							message: res.data.data,
						});
					}else{
						 this.$toast({
							message: res.data.msg,
							icon: 'close'
						});
					}
				})
			}
		}
	}
</script>

<style>
</style>
